iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
自我挑戰組

我的日常學習雜記與筆記整理系列 第 21

Day - 21 函式(五) 調用 - Method, Method Chaining 筆記

  • 分享至 

  • xImage
  •  

方法調用方式

  1. 使用點.來存取
  2. 使用中括號 []
obj.method(x,y); // 和 obj.method(x,y)
obj["method"](x,y); // 調用 method 方法
student.studentId.toUpperCase();

funcName().method();  // 先呼叫函式 funcName,然後再呼叫 funcName 回傳物件的 method 方法。所以若 funcName 沒有回傳一個具有 method 方法的物件,或者 method 不是一個函式,那麼這句將會拋出一個錯誤。

//  funcName(); 呼叫 funcName 函式 回傳一個物件
//  method(); 回傳物件的 method 方法的呼叫

在物件導向程式設計中,方法和 this 關鍵字會是核心概念。

當一個函式作為方法被使用時,它實際上接收了一個隱含的引數(也就是調用該方法的物件)。

triangle.setSize(base, height); // 改變 `triangle` 的大小
setTriangleSize(triangle, base, height);

這兩行程式碼中調用的函式可能在 triangle 物件上執行完全相同的操作。
但是 triangle.setSize(base, height); 更直接地表達了正在改變 triangle 的大小,而 setTriangleSize(triangle, base, height); 則沒有很直接表達。

方法 Method Chaining

可以把方法調用後的回傳值再當作之後要調用的一部分來執行下一個要調用的方法

書中使用jQuery的範例 :


// 找出所有header,利用map()取出每個元素的 id 回傳,再利用get()將取出(回傳)的jQuery物件轉換成JS的陣列,再對此陣列進行排序(sort())。
$(":header").map(
	function(){
		return this.id
	}
).get().sort();

JS範例:

// 使用document.querySelectorAll()選取所有heading元素並取得回傳的NodeList,使用Array.from 將 NodeList 轉換為一個真正的陣列,再利用map()取出每個元素的 id 回傳,再進行排序(sort())
let headers = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"))
    .map(function(header) {
        return header.id;
    })
    .sort();

書中範例:

在寫程式時,有時候會寫些方法(如一些任務或動作),但可能不需要回傳任何的值。那麼可以讓這些方法回傳 this,直接指向目前物件的參考。
整個撰寫方式都是這樣的時候,就可使用方法鏈(Method Chaining)的設計風格

假設有個 shape 物件,它有許多方法如 setXsetYsetSizesetOutlinesetFilldraw。若每個方法都回傳 this,那麼可以寫:

shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw();

範例:

先使用 filter 方法選擇所有的胡蘿蔔,再使用 map 方法計算每個胡蘿蔔名稱的長度,最後使用 reduce 方法計算總共有多少字元。
這些方法呼叫都在同一行程式碼中完成。每個方法都會回傳一個新的結果,再利用此結果呼叫下一個方法。

var vegetables = ["onion", "garlic", "onion", "shallot", "onion"];

var result = vegetables.filter(function (vegetable) {
    return vegetable === "onion";
  }).map(function (onion) {
    return onion.length;
  }).reduce(function (total, length) {
    return total + length;
  }, 0);

console.log(result); // 輸出:15


參考資料:

  • JavaScript 大全 第六版, 歐萊禮

上一篇
Day - 20 函式(四) 調用 - Function, Method
下一篇
Day - 22 函式(五) 調用 - this 筆記
系列文
我的日常學習雜記與筆記整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言